
<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>微信用户</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-tab layui-tab-brief">
      <ul class="layui-tab-title">
        <li class="layui-this">用户列表</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <div class="layui-row">
            <div class="layui-form" style="float:right;">
              <div class="layui-form-item" style="margin:0;">
                <div class="layui-input-inline">
                  <input type="text" name="account" id="account" placeholder="账户" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                  <input type="text" name="userId" id="userId" placeholder="用户ID" autocomplete="off" class="layui-input">
                </div>
                <button id="search" class="layui-btn" data-type="reload">搜索</button>
              </div>
            </div>
          </div>
            <div class="layui-row">
                <div class="layuiAdmin-btns" style="margin-bottom: 10px;">
                    <a class="layui-btn" lay-href="config/wx/create">新增</a>
                </div>
            </div>
          <table id="JeePay_Mgr_VxUser_dataAll" lay-filter="JeePay_Mgr_VxUser_dataAll"></table>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/html" id="jeepayBar">
  <a class="layui-btn layui-btn-xs" lay-event="qrLogin">扫码登录</a>
  <!--<a class="layui-btn layui-btn-xs" lay-event="againLogin">重新登录</a>-->
  <a class="layui-btn layui-btn-xs" lay-event="logout">退出登录</a>
  <a class="layui-btn layui-btn-xs" lay-event="testPayment">测试收款</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>
<script>
  layui.use(['admin', 'table', 'util'], function(){
    var $ = layui.$
            ,admin = layui.admin
            ,table = layui.table
            ,element = layui.element
            ,form = layui.form;

    element.render('breadcrumb', 'breadcrumb');

    var tplStatus = function(d){
      if(d.status == 1) {
        return "<span style='color: green'>启用</span>";
      } else if(d.status == 0) {
        return "<span style='color: red'>停止</span>";
      }
      return "<span class='layui-badge layui-bg-gray'>("+d.status+")-</span>";
    };

    var tplInStatus = function(d){
      if(d.inStatus == 1) {
        return "<span style='color: green'>可以收款</span>";
      } else if(d.inStatus == 0) {
        return "<span style='color: red'>停止收款</span>";
      } else if(d.inStatus == 2) {
        return "<span style='color: orangered'>正在收款</span>";
      }
      return "<span class='layui-badge layui-bg-gray'>("+d.inStatus+")-</span>";
    };

    // -1:扫码二维码超时,0:等待扫码登录,1:已扫码,未确认,2:已扫码,已确认,等待登录,3:已登录
    var tplLoginStatus = function(d){
      if(d.loginStatus == -1) {
        return "<span class='layui-badge layui-bg-gray'>["+d.loginStatus+"]未登录</span>";
      } else if(d.loginStatus == 0) {
        return "<span class='layui-badge layui-bg-gray'>["+d.loginStatus+"]等待扫码</span>";
      } else if(d.loginStatus == 1) {
        return "<span class='layui-badge layui-bg-gray'>["+d.loginStatus+"]已扫码,未确认</span>";
      } else if(d.loginStatus == 2) {
        return "<span class='layui-badge layui-bg-gray'>["+d.loginStatus+"]已扫码,已确认</span>";
      } else if(d.loginStatus == 3) {
        return "<span class='layui-badge'>["+d.loginStatus+"]已登录</span>";
      }
      return "<span class='layui-badge layui-bg-gray'>["+d.loginStatus+"]-</span>";
    };

    var tplLastInTime = function(d){
      if(d.lastInTime == null) {
        return "-";
      }
      return layui.util.toDateString(d.lastInTime, "yyyy-MM-dd HH:mm:ss");
    };

    //用户列表
    table.render({
      elem: '#JeePay_Mgr_VxUser_dataAll'
      ,url: layui.setter.baseUrl + '/wx_user/list' //列表接口
      ,where: {
          access_token: layui.data(layui.setter.tableName).access_token
      }
      ,id: 'tableReload'
      ,page: true
      ,cols: [[
        {type: 'checkbox', fixed: 'left'}
        ,{field: 'userId', title: '用户ID', width: 100}
        ,{field: 'account', title: '账号', width: 140}
        /*,{field: 'wxId', title: '微信ID'}*/
        ,{field: 'serverId', title: '服务器ID', width: 100}
        /*,{field: 'randomId', title: '随机ID', width: 300}*/
        ,{field: 'dayInAmount', title: '今日收款', width: 100, templet: '<div>{{ d.dayInAmount/100 }}</div>'}
        ,{field: 'dayInNumber', title: '今日订单', width: 100}
        ,{field: 'loginResult', title: '登录状态', templet: tplLoginStatus, width: 200}
        ,{field: 'inStatus', title: '收款状态', templet: tplInStatus, width: 120}
        ,{field: 'lastInTime', title: '最后付款', width: 200, templet: tplLastInTime}
        ,{field: 'status', title: '状态', templet: tplStatus, width: 120}
        ,{field: 'createTime', title: '创建时间', width: 200, templet: '<div>{{ layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss") }}</div>'}
        ,{field: 'edit', title: '操作', width: 280, toolbar: '#jeepayBar', fixed: 'right' }
      ]]
      ,skin: 'line'
    });

    var loginNotifyTimeOut = null;
    $.getNotifyResult = function(startTime, userId, loginTipWin) {
      loginNotifyTimeOut = setInterval(function(){
        if(new Date().getTime() - parseInt(startTime) > 1000 * 60 * 5){
          if(null != loginNotifyTimeOut){
            layer.open({
              title: "登录失败",
              content: "获取登录结果超时"
            });
            clearTimeout(loginNotifyTimeOut);
          }
        }else{
          admin.req({
            url: layui.setter.baseUrl + '/wx_user/get',
            data: {
              userId: userId
            },
            success: function(res){
              if(res.code == 0) {

                var data = res.data;
                var loginStatus = data.loginStatus;
                var loginResult = data.loginResult;
                //
                if(loginStatus == 0) {
                  var codeImgUrl = data.wxDat;
                  if(codeImgUrl != null && codeImgUrl != "") {
                    document.getElementById("loginTip").innerHTML = "<p>请用微信扫描二维码完成登录</p><img width='200' height='200' src='data:image/png;base64," +  codeImgUrl + "' />";
                  }
                }else if(loginStatus == 1) {
                  //
                  document.getElementById("loginTip").innerHTML = loginResult;
                }else if(loginStatus == 2) {
                  // 已扫码，等待登录
                  document.getElementById("loginTip").innerHTML = loginResult;
                }else if(loginStatus == 3) {
                  // 已经登录
                  document.getElementById("loginTip").innerHTML = loginResult;
                  clearInterval(loginNotifyTimeOut);
                }

              }
            }
          });
        }
      }, 2000);
    };


    //监听工具条
    table.on('tool(JeePay_Mgr_VxUser_dataAll)', function(obj){
      var data = obj.data;
      if(obj.event === 'detail'){
        //location.hash = "/merchant/qrcode/qrcode_view/id=" + data.id;
      } else if(obj.event === 'edit') {
        location.hash = "/config/wx/update/userId=" + data.userId;
      } else if(obj.event === 'qrLogin') {
        var userId = data.userId;
        var load = layer.msg('正在获取登录信息..', {
          icon: 16
          ,shade: 0.01
          ,time: 9999999999
        });
        admin.req({
          url: layui.setter.baseUrl + '/wx_user/qr_login'
          ,data: { userId: data.userId }
          ,success: function(res){
              layer.close(load);
              if(res.code == 0){
                var loginTipWin = layer.open({
                  title: "扫码登录",
                  type: 1,
                  anim: 1,
                  content: "<div id='loginTip' style='height: 200px; width: 200px; text-align: center; margin: 20px;'>连接成功...<p>正在生成登录二维码</p></div>"
                });
                $.getNotifyResult(null, userId, loginTipWin);
              }
          }
        });
      } else if(obj.event === 'againLogin') {
        var userId = data.userId;
        var load = layer.msg('正在连接微信服务端...', {
          icon: 16
          ,shade: 0.01
          ,time: 9999999999
        });
        admin.req({
          url: layui.setter.baseUrl + '/wx_user/again_login'
          ,data: { userId: data.userId }
          ,success: function(res){
            layer.close(load);
            if(res.code == 0){
              layer.msg(res.data.msg);
            }
          }
        });
      } else if(obj.event === 'logout') {
        var userId = data.userId;
        var load = layer.msg('正在连接微信服务端...', {
          icon: 16
          ,shade: 0.01
          ,time: 9999999999
        });
        admin.req({
          url: layui.setter.baseUrl + '/wx_user/logout'
          ,data: { userId: data.userId }
          ,success: function(res){
            layer.close(load);
            if(res.code == 0){
              layer.msg(res.data.msg);
            }
          }
        });
      } else if(obj.event === 'testPayment') {
        var userId = data.userId;
        var load = layer.msg('正在获取登录信息..', {
          icon: 16
          ,shade: 0.01
          ,time: 9999999999
        });
        admin.req({
          url: layui.setter.baseUrl + '/wx_user/payment_qrcode'
          ,data: { userId: data.userId }
          ,success: function(res){
            layer.close(load);
            if(res.code == 0 && res.data.codeImgUrl != null && res.data.codeImgUrl != ""){
              layer.open({
                title: "扫描二维码支付",
                type: 1,
                anim: 1,
                content: "<img width='200' height='200' src='" +  res.data.codeImgUrl + "' />"
              });
            }
          }
        });
      }

    });

    // 搜索
    var $ = layui.$, active = {
      reload: function(){
        var mchId = $('#mchId').val();
        var appId = $("#appId").val();
        //执行重载
        table.reload('tableReload', {
          page: {
            curr: 1 //重新从第 1 页开始
          }
          ,where: {
            mchId: mchId,
            appId : appId
          }
        });
      }
    };
    $('#search').on('click', function() {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

    // 渲染表单
    form.render();
  });
</script>